<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 한국의 논매기 소리 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link href="/css/reset.css" type="text/css" rel="stylesheet" />
<link href="/css/common.css" type="text/css" rel="stylesheet" />
<link href="/css/jquery.bxslider.css" type="text/css" rel="stylesheet" />
<link href="/css/layout.css" type="text/css" rel="stylesheet" />
<link href="/css/ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
<!--
.bx-wrapper .bx-pager {
	top:0;
	left:287px;
}
.bx-wrapper .bx-pager a {
	border: solid #ccc 2px;
	display: block;
	margin:0px;
	padding:0px;
}
.bx-wrapper .bx-pager a:hover, 
.bx-wrapper .bx-pager a.active {
	border: solid #298500 2px;
}
.bx-wrapper {
	float:left;
	width:272px;
	margin-bottom:0;
}
//-->
</style>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="/js/select.js" type="text/javascript"></script>
<!--script src="/js/gnb.min.js" type="text/javascript"></script-->
<script src="/js/gnb_ui.js" type="text/javascript"></script>
<script src="/js/slides.js" type="text/javascript"></script>
<script src="/js/jquery.bxslider.min.js" type="text/javascript"></script>
<script src="/js/ui.js" type="text/javascript"></script>
<script type="text/javascript">
var visiulImgArray = new Array();
</script>

<c:forEach var="visual" items="${visualList1.list }">
	<c:choose>
		<c:when test="${visual.titleImageSeq ne 0 }">
			<script type="text/javascript">
				visiulImgArray.push("<img src=\"<c:url value='/download.do'/>?contentsId=${visual.contentsGroupId}_${visual.contentsSeq}&attachFileSeq=${visual.titleImageSeq}&thumbnail=true\" style=\"width:76px; height:59px;\"/>");
			</script>
		</c:when>
		<c:otherwise>
			<script type="text/javascript">
			visiulImgArray.push("<img src=\"/img/sub_default.jpg\" style=\"width:76px; height:59px;\"/>");
			</script>
		</c:otherwise>
	</c:choose>
</c:forEach>
<script type="text/javascript">
//<![CDATA[
 

//이미지 맵 클릭시
function mouseOverMap(num)
{
	document.getElementById('imgMap').src = "/img/bg_allMap"+num+".png";
}


//이미지 맵 아웃시
function mouseOutMap()
{
	document.getElementById('imgMap').src = "/img/bg_allMap.png";
}
(function ($) {
	$(document).ready(function() {
		//검색창
		$('.search').schSelect();
		//gnb 메뉴
		navigation("gnb_wrap", "slide");
		//메인 비주얼 롤링
		$('.slides').slides({
			effect:"slide",
			play: 3000,
			pause: 3000,
			generateNextPrev:true
		});
		//아코디언 
		$("#accordion" ).accordion({
			collapsible: true,
			active:false,
			heightStyle: "content"
		});
		//s:thumb_img 롤링
		slider = $('.bxslider').bxSlider({
			mode: 'fade',
			controls: false,
			buildPager: function(slideIndex){
				switch(slideIndex){
				case 0:
				return visiulImgArray[0];
				case 1:
				return visiulImgArray[1];
				case 2:
				return visiulImgArray[2];
				}
			}
		});
		slider.startAuto();
	});
}(jQuery));
//]]>
</script>
</head>
<body>
<!-- 메뉴건너뛰기 -->
<div id="skipnavigation">
	<a href="#header">상단메뉴 바로가기</a>
	<a href="#container">컨텐츠 바로가기</a>
	<a href="#footer">하단 바로가기</a>
</div>
<!-- //메뉴건너뛰기 -->
<div class="wrap">
	<!-- 상단 -->
	<jsp:include page="../common/header.jsp"></jsp:include>
	<!-- //상단 -->
	<!-- 컨텐츠 -->
	<div id="container">
		<div class="visual_area">
			<div class="visual_wrap">
				<!-- 메인 이미지 롤링 -->
				<div class="main_roll slides">
					<div class="slides_container">
						<div>
							<img src="/img/visual_img1.jpg" style="width:620px; height:378px;" alt="이미지1"/>
						</div>
						<div>
							<img src="/img/visual_img1.jpg" style="width:620px; height:378px;" alt="이미지2"/>
						</div>
						<div>
							<img src="/img/visual_img1.jpg" style="width:620px; height:378px;" alt="이미지3"/>
						</div>
					</div>
				</div>
				<!-- //메인 이미지 롤링 -->
				<!-- 아코디언 -->
				<div id="accordion" class="accordion_box">
					<c:forEach var="region"  items="${regionList}" varStatus="counter">
					<h3>${region.codeName }</h3>
					<div>
						<div class="accordion_img">
							<img src="/img/acodi_img.jpg" style="width:163px; height:70px;" alt="이미지"/>
						</div>
						<div class="btn_center btn_acoimg">
							<a href="/board/contentsList.do?boardId=2&contentsCategoryCd=${region.codeId}"><img src="/img/btn_mapInfo.gif" alt="지역정보"/></a>
							<a href="/item/areaService.do?areaCd=${region.codeId}"><img src="/img/btn_material_sch.gif" alt="자료검색"/></a>
						</div>
					</div>
					</c:forEach>
				</div>
				<!-- //아코디언 -->
				<!-- 지도 -->
				<div class="map_box">
					<h2><img src="/img/map_tx.png" alt="지도에서 검색하시고 싶은 지역을 클릭해 주세요."/></h2>
					<img src="/img/bg_allMap.png" usemap="#Map" id="imgMap" onmouseout="mouseOutMap(); return false;" alt="전국지도" />
					<map name="Map" id="Map">
					<area shape="poly" href="" coords="57,55,67,46,77,54,71,64,62,63,57,57" alt="서울" onmouseover="mouseOverMap('1'); return false;" onclick="popOpen('R017001'); return false;" onfocus="this.blur();" />
					<area shape="poly" href="" coords="45,44,52,33,62,18,71,17,85,28,93,37,89,44,93,54,102,55,102,65,101,78,79,94,70,91,60,94,52,82,47,78,52,67,58,61,70,64,76,55,69,46,58,55,50,52,45,52" alt="경기" onclick="popOpen('R017003'); return false;" onmouseover="mouseOverMap('2'); return false;" onfocus="this.blur();" />
					<area shape="poly" href="" coords="45,43,37,38,30,44,35,61,39,67,48,64,52,67,57,61,57,55,46,53,47,44" alt="인천" onmouseover="mouseOverMap('3'); return false;" onclick="popOpen('R017002'); return false;"  onfocus="this.blur();" />
					<area shape="poly" href="" coords="71,16,110,15,130,1,159,47,173,70,175,78,161,83,138,84,124,74,111,74,105,79,100,67,102,56,91,50,94,35,80,25" alt="강원" onmouseover="mouseOverMap('4'); return false;" onclick="popOpen('R008'); return false;" onfocus="this.blur();" />
					<area shape="poly" href="" coords="52,89,60,94,72,91,80,93,85,102,79,103,78,107,84,118,80,127,83,134,87,136,91,132,95,142,89,147,80,140,71,141,66,135,60,142,48,145,41,134,40,124,31,120,30,109,24,103,30,93,40,85" alt="충남" onmouseover="mouseOverMap('5'); return false;" onclick="popOpen('R015'); return false;" onfocus="this.blur();" />
					<area shape="poly" href="" coords="138,84,126,77,118,75,116,76,111,73,101,78,80,93,82,99,85,103,77,107,83,118,92,122,90,131,95,142,107,144,116,133,106,127,109,119,106,112,123,97,131,100,134,92" alt="충북" onmouseover="mouseOverMap('6'); return false;" onclick="popOpen('R016'); return false;" onfocus="this.blur();" />
					<area shape="poly" href="" coords="83,118,91,121,92,126,90,132,86,136,80,131,80,121" alt="대전" onmouseover="mouseOverMap('7'); return false;" onclick="popOpen('R006'); return false;" onclick="popOpen('R006'); return false;"  onfocus="this.blur();" />
					<area shape="poly" href="" coords="174,78,181,96,179,142,186,141,185,155,179,165,167,162,162,167,156,166,150,171,137,167,146,158,148,148,141,145,131,152,131,162,128,167,122,165,117,155,108,152,108,145,116,134,106,128,109,116,106,111,123,97,131,100,138,84,169,84" alt="경북" onmouseover="mouseOverMap('8'); return false;" onclick="popOpen('R011'); return false;"  onfocus="this.blur();" />
					<area shape="poly" href="" coords="48,145,60,141,65,135,73,141,82,140,88,146,95,142,106,144,108,152,98,158,93,169,97,179,92,184,77,185,70,186,68,179,56,176,47,184,37,178,48,159,46,150,42,147" alt="전북" onmouseover="mouseOverMap('9'); return false;" onfocus="this.blur();" onclick="popOpen('R013'); return false;"/>
					<area shape="poly" href="" coords="169,181,159,172,161,167,156,165,150,172,138,167,123,167,121,160,113,154,107,152,97,158,92,170,97,178,93,184,96,195,102,206,105,221,118,222,129,214,142,221,150,213,148,202,137,206,134,199,144,195,151,196,162,183" alt="경남" onmouseover="mouseOverMap('10'); return false;" onclick="popOpen('R010'); return false;" onfocus="this.blur();" />
					<area shape="poly" href="" coords="137,167,144,162,148,148,142,144,138,146,138,149,133,149,130,156,132,163,129,164,133,168" alt="대구" onmouseover="mouseOverMap('11'); return false;" onclick="popOpen('R003'); return false;" onfocus="this.blur();" />
					<area shape="poly" href="" coords="182,165,180,174,178,184,173,185,160,173,162,166,168,162,174,166" alt="울산" onmouseover="mouseOverMap('12'); return false;" onclick="popOpen('R007'); return false;" onfocus="this.blur();" />
					<area shape="poly" href="" coords="174,185,169,180,151,192,150,197,142,195,134,200,137,206,145,201,150,203,157,201,172,194" alt="부산" onmouseover="mouseOverMap('13'); return false;" onclick="popOpen('R002'); return false;"  onfocus="this.blur();" />
					<area shape="poly" href="" coords="38,179,46,184,58,176,67,180,71,187,92,184,101,202,105,220,100,227,91,227,91,239,77,239,54,246,36,239,27,244,15,253,11,244,19,230,12,217,22,203,18,195,34,194,51,190,51,197,63,201,66,195,61,188,52,189" alt="전남" onclick="mouseOverMap('14'); return false;" onclick="popOpen('R012'); return false;"  onfocus="this.blur();" />
					<area shape="poly" href="" coords="55,190,61,188,66,196,63,201,57,202,51,197,49,191,54,190" alt="광주" onmouseover="mouseOverMap('15'); return false;" onclick="popOpen('R005'); return false;"  onfocus="this.blur();" />
					<area shape="poly" href="" coords="50,269,41,279,24,283,15,284,8,280,10,274,20,268,28,266,42,263" alt="제주" onmouseover="mouseOverMap('16'); return false;" onclick="popOpen('R014'); return false;" onfocus="this.blur();" />
					</map>
				</div>
				<!-- //지도 -->
			</div>
		</div>
		<!-- 중간 컨텐츠 -->
		<div class="section">
			<div class="thumb_box">
				<div class="thumb_tit">
					<h3><img src="/img/tx_content.gif" alt="추천컨텐츠"/></h3>
					<span><a href="/board/contentsList.do?boardId=1"><img src="/img/btn_more.gif" alt="더보기"/></a></span>
				</div>
				<ul class="bxslider">
					<c:forEach var="visual" items="${visualList1.list }">
					<c:choose>
					<c:when test="${visual.titleImageSeq ne 0 }">
					<li><img src="<c:url value='/download.do'/>?contentsId=${visual.contentsGroupId}_${visual.contentsSeq}&attachFileSeq=${visual.titleImageSeq}&thumbnail=true" style="width:270px; height:195px;" alt="이미지"/></li>
					</c:when>
					<c:otherwise>
					<li><img src="/img/sub_default.jpg" style="width:270px; height:195px;" alt="이미지"/></li>
					</c:otherwise>
					</c:choose>
					</c:forEach>
				</ul>
				<div class="thumb_tbox">
				<c:forEach var="visual" items="${visualList1.list }">
					<dl class="">
						<dt class="ellipsis" ><a href="/board/contentsView.do?boardId=${visual.boardId }&contentsGroupId=${visual.contentsGroupId}" style="width:182px;">${visual.contentsNm }</a></dt>
						<dd>2013.12.20</dd>
					</dl>
				</c:forEach>	
				</div>
			</div>
			<div class="notice_box">
				<div class="thumb_tit">
					<h3><img src="/img/tx_notice.gif" alt="공지사항"/></h3>
					<span><a href="/board/contentsList.do?boardId=3"><img src="/img/btn_more.gif" alt="더보기"/></a></span>
				</div><!-- 5줄만 노출 -->
				<ul class="">
					<c:forEach var="notice" items="${noticeList.list }">
					<li class="ellipsis"><a href="/board/contentsView.do?boardId=${notice.boardId }&contentsGroupId=${notice.contentsGroupId}" style="width:226px;">${notice.contentsNm }</a><span><em><fmt:formatDate value="${notice.writeDate}" pattern="yyyy.MM.dd"/></em><c:if test="${notice.isNew eq 1}"><img src="/img/ico_new.gif" alt="new"/></c:if></span></li>
					</c:forEach>
				</ul>
			</div>
		</div>
		<!-- //중간 컨텐츠 -->
	</div>
	<!-- //컨텐츠 -->
	<!-- 하단 -->
	<jsp:include page="../common/footer.jsp"></jsp:include>
	<!-- //하단 -->
</div>
</body>
</html>